<template>
  <div class="bucket-statistics-preDrawing">
    <el-scrollbar>
      <div class="top-card-container">
        <statisticalDataCard :data="cardList"></statisticalDataCard>
      </div>
    </el-scrollbar>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption" v-on="gridEvents">
        <template #doffingLengthAvgSlot="{ row }"
          >{{
            row.doffingLengthAvg == null
              ? row.doffingLengthAvg
              : parseFloat(row.doffingLengthAvg).toFixed(2)
          }}
        </template>
      </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRefDetail" v-bind="gridOptionDetail">
        <template #doffingLengthAvgSlot="{ row }"
          >{{
            row.doffingLengthAvg == null
              ? row.doffingLengthAvg
              : parseFloat(row.doffingLengthAvg).toFixed(2)
          }}
        </template>
      </BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import type { VxeGridListeners } from 'vxe-table'
  import statisticalDataCard from '../../../businessComponents/statisticalDataCard.vue'
  import { handleCombineColumnsList, BucketDetailsReportPreDrawingTableColumns } from '../../data'

  import {
    postTongJiList_combine,
    getCanShuXiangQinList_combine,
    getJiTaiXiangQinList_combine,
    getPinZhongQiangQinList_combine
  } from '@/api/shengChanJianShi'

  const props = defineProps<{
    processName: string
    statusCode: string
  }>()

  const { t } = useI18n()
  const cardList = ref<any[]>([])
  const statisticsList = ref<any[]>([])

  const gridOption = reactive<BasicGridProps>({
    cellClassName({ column }) {
      if (['materialName', 'machineName'].includes(column.field)) {
        return 'col-color'
      }
      if (['breakCnt', 'barrelNo', 'rollerLingerCnt'].includes(column.field)) {
        return 'col-underline'
      }
      return null
    },
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `bucket-statistics-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 500,
    columns: handleCombineColumnsList(props.statusCode)
  })

  const getStatisticsReportList = () => {
    postTongJiList_combine(
      {
        MaterialIds: [
          '80008db6-285b-619f-5bf6-3a0bd018ff6f',
          '8baecd83-093e-cb3f-6225-3a0a1e6578ca',
          '09c56d59-4b30-2307-854d-3a08d1c20c04',
          'b399c4bc-d5c4-4486-896a-3a16b1d5d803',
          'b3f20a60-6f96-89e4-76cf-3a0bd0184b04',
          'c0318899-0e42-5bb9-4693-3a0a1e667688',
          '67b9daab-0438-252a-8547-3a09b34c6e05',
          '6d4d01ff-d75c-c0d7-08e9-3a16b1d697dc'
        ],
        tsIdStart: '25071401',
        tsIdEnd: '25071401'
      },
      props.statusCode
    ).then((res: any) => {
      handleData(res)
    })
  }

  const handleData = (res) => {
    // 卡片数据源
    cardList.value = handleFormatCardData(res.barrelReportTotal)
    // 统计报表数据
    statisticsList.value = res.barrelReportDetail.map((value) => {
      return {
        ...value,
        breakTimes: (value.breakTimes / 60).toFixed(2),
        rollerLingerTimes: (value.rollerLingerTimes && value.rollerLingerTimes / 60) || '',
        spinningStart: dayjs(value.spinningStart).format('YYYY-MM-DD HH:mm'),
        spinningEnd: dayjs(value.spinningEnd).format('YYYY-MM-DD HH:mm'),
        spinngDuration: (value.spinngDuration / 60).toFixed(2)
      }
    })
    gridOption.data = statisticsList.value

    // 默认选中第一行品种 获取相关详情数据
    selectedRow.value = statisticsList.value[0]
    res.length != 0 && getDetailListBymaterialName()
  }

  const selectedRow = ref()
  const gridEvents: VxeGridListeners = {
    cellClick({ row, column }) {
      selectedRow.value = row
      switch (column.field) {
        case 'materialName':
          getDetailListBymaterialName()
          break
        case 'machineName':
          getDetailListByMachineName()
          break
        case 'barrelNo':
          getDetailListByOther(0)
          break
        case 'breakCnt':
          getDetailListByOther(1)
          break
        case 'rollerLingerCnt':
          getDetailListByOther(4)
          break
      }
    }
  }

  // 点击品种获取参数详情数据
  const getDetailListBymaterialName = () => {
    getPinZhongQiangQinList_combine(
      {
        materialId: selectedRow.value.materialId,
        tsidStart: '25071201',
        tsidEnd: '25071201'
      },
      props.statusCode
    ).then((res: any) => {
      handleDetailData(res)
    })
  }

  // 点击机台获取详情数据
  const getDetailListByMachineName = () => {
    getJiTaiXiangQinList_combine(
      {
        machineDocumentId: selectedRow.value.machineDocumentId,
        tsidStart: '25071201',
        tsidEnd: '25071201'
      },
      props.statusCode
    ).then((res) => {
      handleDetailData(res)
    })
  }

  // 点击其他参数获取详情数据 0桶序号 1断条个数 4皮辊缠绵
  const getDetailListByOther = (index) => {
    getCanShuXiangQinList_combine(
      {
        machineDocumentId: selectedRow.value.machineDocumentId,
        start: selectedRow.value.spinningStart,
        end: selectedRow.value.spinningEnd,
        description: index
      },
      props.statusCode
    ).then((res) => {
      handleDetailData(res)
    })
  }

  // 详情表格数据处理并赋值
  const handleDetailData = (res) => {
    gridOptionDetail.data = res.map((val) => {
      return {
        ...val,
        machineName: selectedRow.value.machineName,
        startTime: dayjs(val.startTime).format('YYYY-MM-DD HH:mm'),
        endTime: dayjs(val.endTime).format('YYYY-MM-DD HH:mm'),
        duration: Math.floor(val.duration / 60)
      }
    })
  }

  const gridOptionDetail = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.详细报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `bucket-detail-statistics-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '报表'
    },
    maxHeight: 500,
    columns: BucketDetailsReportPreDrawingTableColumns
  })

  const handleFormatCardData = (data) => {
    return data.map((item) => {
      const temp = {
        title: item.materialName,
        content: [
          {
            label: t('custom.合计产出桶数'),
            value: item.barrelCnt,
            unit: '桶'
          },
          {
            label: t('custom.断条个数'),
            value: item.breakCnt,
            unit: '个'
          },
          {
            label: t('custom.断条时长'),
            value: Math.floor(item.breakTimes / 60),
            unit: '分钟'
          }
        ]
      }
      if (props.statusCode === '11830') {
        temp.content = [
          ...temp.content,
          {
            label: t('custom.皮辊缠绵次数'),
            value: item.rollerLingerCnt,
            unit: '次'
          },
          {
            label: t('custom.皮辊缠绵时长'),
            value: Math.floor(item.rollerLingerTimes / 60),
            unit: '分钟'
          }
        ]
      }
      return temp
    })
  }

  onMounted(() => {
    getStatisticsReportList()
  })
</script>

<style scoped lang="scss">
  :deep(.col-color) {
    color: #74c239;
    cursor: pointer;
  }

  :deep(.col-underline) {
    color: #74c239;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
